高性能網(wǎng)站建設指南--前端
發(fā)布時(shí)間:2013-11-22 瀏覽:383打印字號:大中小
性能黃金法則:只有10%-20%的最終用戶(hù)響應時(shí)間花在了下載HTML文檔上,其余的80%-90%時(shí)間花在了下載頁(yè)面中的所有組件上。
規則1、減少HTTP請求
1、圖片地圖
2、合并腳本和樣式表
規則2、使用內容發(fā)布網(wǎng)絡(luò )
規則3、添加Expires頭
1、Expires頭
2、Max-Age和mod_expires
規則4、壓縮組件;AddOutputFilterByType DEFAULT text/html text/css application/x-javascript
規則5、將樣式表放在頂部
規則6、將腳本放在底部
規則7、避免CSS表達式
規則8、使用外部Javascript和CSS
規則9、減少DNS查找
規則10、精簡(jiǎn)Javascript
規則11、避免重定向
規則12、移除重復腳本
規則13、配置ETag
規則14、使Ajax可緩存
新增:
規則15. Flush the Buffer Early 盡早的釋放緩沖
當用戶(hù)進(jìn)行頁(yè)面請求時(shí),服務(wù)器端需要花費200到500毫秒時(shí)間來(lái)拼合HTML,將寫(xiě)在head與body之間,釋放緩沖,這樣可以將文件頭先發(fā)送出去,然后再發(fā)送文件內容,提高效率。
規則16. Use GET for AJAX Requests 用GET方式進(jìn)行AJAX請求
Get 方法和服務(wù)器只有一次交互(發(fā)送數據),而 Post 要兩次(發(fā)送頭部再發(fā)送數據)。
規則17. Post-load Components 延遲加載組件
最先加載必須的組件進(jìn)行頁(yè)面初始化,然后再加載其他,YUI Image Loader 是很好的例子。
規則18. Preload components 預加載組件
提前加載以后可能用到的東西,和延遲加載并不沖突,它的目的是為后續請求提供更快的響應,參見(jiàn)Google首頁(yè)上的CSS sprites應用。
規則19. Reduce the Number of DOM Elements 減少DOM元素數量
復雜的頁(yè)面結構意味著(zhù)更長(cháng)的下載及響應時(shí)間,更合理更高效的使用標簽來(lái)架構頁(yè)面,是好的前端的必備條件。
規則20. Split Components Across Domains 跨域分離組件
頁(yè)面組件多個(gè)來(lái)源可以增大你的平行下載量,但注意不要過(guò)多,超過(guò)2-4個(gè)域名會(huì )引起上面說(shuō)到的DNS查找浪費。
規則21. Minimize the Number of iframes 減少iframe數量
需要更有效的利用 ifames。
iframe 優(yōu)點(diǎn):有利于下載緩慢的廣告等第三方內容,安全沙箱,并行下載腳本
iframe 缺點(diǎn):即使為空也會(huì )有較大資源消耗,會(huì )阻止頁(yè)面的onload,非語(yǔ)義
規則22. No 404s 不要出現404頁(yè)面
站點(diǎn)本身里(非搜索結果)出現404頁(yè)面,無(wú)意義的404頁(yè)面會(huì )影響用戶(hù)體驗并且會(huì )消耗服務(wù)器資源。
規則23. Reduce Cookie Size 減小Cookie
Cookie在服務(wù)器及瀏覽器之間的通過(guò)文件頭進(jìn)行交換,盡可能減小Cookie體積,設置合理的過(guò)期時(shí)間,能夠很好的提高效率。
規則24. Use Cookie-free Domains for Components 對組件使用無(wú)Cookie的域名
對靜態(tài)組件的Cookie讀取是一種浪費,使用另一個(gè)無(wú)Cookie的域名來(lái)存放你的靜態(tài)組件式一個(gè)好方法,或者也可以在Cookie中只存放帶www的域名。
規則25. Minimize DOM Access 減少DOM的訪(fǎng)問(wèn)次數
JS訪(fǎng)問(wèn)DOM是很慢的,盡量不要用JS來(lái)設置頁(yè)面布局。
規則26. Develop Smart Event Handlers 開(kāi)發(fā)靈活的事件處理句柄
DOM樹(shù)上過(guò)多的元素被加入事件句柄的話(huà),反應效率肯定會(huì )低,YUI事件工具有一個(gè) onAvailable 方法可以幫助你靈活的設置DOM事件句柄
規則27. Choose < link >over @import 使用< link >而非 @import
在IE中使用@import就和在頁(yè)面底部用< link >一樣,我們前面說(shuō)要把< link >放頂部的。
規則28. Avoid Filters 避免過(guò)濾器的使用
如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只對IE6及以下的版本適用,用PNG8圖片。如果你非要使用,加上_filter以免影響IE7+用戶(hù)。
規則29. Optimize Images 優(yōu)化圖片
將你的GIF轉為PNG8會(huì )是個(gè)減小體積的好辦法,另外有很多方法處理你的JPG及PNG圖片以達到優(yōu)化效果。
規則30. Optimize CSS Sprites 優(yōu)化CSS Sprites
在CSS Sprites中豎直并盡量緊湊的排列圖片,盡量將顏色相似的圖片排在一起,會(huì )減小圖片本身的大小及提高頁(yè)面圖片顯示速度。
規則31. Don’t Scale Images in HTML 不要在HTML中縮放圖片
圖片要用多大的就用多大的,1000X1000的圖片被width=”100″ height=”100″以后,本身的KB數是不會(huì )減少的。
規則32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小并緩存它
站點(diǎn)的瀏覽器ICO應該不是經(jīng)常換吧,那就長(cháng)時(shí)間的緩存它,并且最好控制在1K以下。
規則33. Keep Components under 25K 保證組件在25K以下
iPhone不能緩存25K以上的組件,并且這還是要在被壓縮前。
規則34. Pack Components into a Multipart Document 將組件打包進(jìn)一個(gè)多部分的文檔中
就好像在郵件中加入附件一樣,一個(gè)HTTP請求就夠了,但是這一技術(shù)需要確保你的代理支持,iPhone就不支持。


